<template>
  <div class="wrapper">
        <div class="header-box">
            <header>
                <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
                <p>历史反馈信息列表</p>
                <i class="fa fa-th" @click="toSelectGrid"></i>
            </header>
            <div class="top-ban"></div>
            <img src="../assets/header.png">
        </div>

        <ul>
            <li v-for="aqiFeedback in aqiFeedbackArr" :key="aqiFeedback.afId">
                <div>
                    <i :style="{backgroundColor: aqiFeedback.aqi.color}">{{aqiFeedback.aqi.chineseExplain}}</i>
                    <span>{{aqiFeedback.afDate}} {{aqiFeedback.afTime}}</span>
                </div>
                <div>{{aqiFeedback.gridProvince.provinceName}}</div>
                <div>{{aqiFeedback.gridCity.cityName}}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";
import { getSessionStorage } from "../common.js";

const router = useRouter();
const axios = inject("axios");
const supervisor = getSessionStorage('supervisor');

const aqiFeedbackArr = ref([]);

const init = ()=>{
  axios
    .post("aqiFeedback/listAqiFeedbackByTelId", {
      telId: supervisor.telId
    })
    .then((response) => {
      aqiFeedbackArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
}
init();

const toSelectGrid = ()=>{
  router.push('/selectGrid');
}
</script>

<style scoped>
ul{
    width: 100%;
    background-color: #FFF;
    color: #555;
    overflow: hidden;
}
ul li{
    width: 100%;
    border: solid 1px #C6E2FF;
    box-sizing: border-box;
    padding: 1vw 2vw;
    font-size: 3.8vw;

    display: flex;
    justify-content: space-between;

    margin: 2vw 0;
    background-color: #ECF5FF;
    border-radius: 1vw;
}
ul li div{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul li div:first-child{
    flex: 2;
}
ul li div i{
    display: block;
    box-sizing: border-box;
    padding: 1.5vw 2vw;
    font-size: 3.2vw;
    font-weight: 700;
    border-radius: 1vw;
    color: #FFF;
    margin-right: 2vw;
    background-color: red;
    font-style: normal;
}
</style>